<template>
  <div class="organizationinfo">
    <el-card :shadow="shadowShow" style="min-height: 600px">
      <div class="person_nav">
        <span>
          {{ $t('personOriginationInfo.xinxi1') }}
        </span>
        <el-button type="primary" :size="optionButtonSize" @click="addHandle">{{
          $t('personOriginationInfo.xinxi2')
        }}</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        size="mini"
        :header-cell-style="headercellstyle"
      >
        <el-table-column align="center" prop="name" :label="$t('personOriginationInfo.xinxi3')" />
        <el-table-column
          align="center"
          prop="checkStatus"
          :label="$t('personOriginationInfo.xinxi4')"
        >
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <!-- 0 内部待确认,1: 审核通过 ,2,审核拒绝 3已退出 4外部待审核  -->
            <!-- 加入未通过的机构，状态是待确认，无操作
                             机构添加此用户，状态是待审核，操作 同意，拒绝，添加提示 -->
            <!-- 'xinxi5':'待审核',
                                'xinxi6':'已确认',
                                'xinxi7': '已拒绝',
                                'xinxi8': '已退出', -->
            <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content">
                {{ $t('add.add97') }}【{{ scope.row.name }} 】{{ $t('add.add98') }}
              </div>
              <el-tag v-if="scope.row.checkStatus == 4" :size="tableTagSize" type="info">
                {{ $t('add.add018') }}
                <i style="cursor: pointer; margin-left: 5px" class="el-icon-warning-outline"></i>
              </el-tag>
            </el-tooltip>
            <el-tag v-if="scope.row.checkStatus == 1" :size="tableTagSize" type="success">{{
              $t('personOriginationInfo.xinxi6')
            }}</el-tag>
            <el-tag v-if="scope.row.checkStatus == 2" :size="tableTagSize" type="primary">{{
              $t('personOriginationInfo.xinxi7')
            }}</el-tag>
            <el-tag v-if="scope.row.checkStatus == 3" :size="tableTagSize" type="danger">{{
              $t('personOriginationInfo.xinxi8')
            }}</el-tag>
            <el-tag v-if="scope.row.checkStatus == 0" :size="tableTagSize" type="danger">
              {{ $t('add.add019') }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" :label="$t('personOriginationInfo.xinxi9')">
          <template slot-scope="props">
            {{
              props.row.organizedType == 1
                ? $t('personOriginationInfo.xinxi21')
                : $t('personOriginationInfo.xinxi11')
            }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="createDate"
          :label="$t('personOriginationInfo.xinxi12')"
        />
        <el-table-column
          align="center"
          prop="updateDate"
          :label="$t('personOriginationInfo.xinxi13')"
        />
        <el-table-column align="center" :label="$t('personOriginationInfo.xinxi14')">
          <template slot-scope="scope">
            <!-- {{ scope.row.checkStatus }}--{{ user_deptId }}--{{ scope.row.deptId }}--{{ user_id }}--{{
                            scope.row.userId }} -->
            <!-- 0 内部待确认,1: 审核通过 ,2,审核拒绝 3已退出 4外部待审核  -->
            <!-- 0内部待确认叫待确认 4外部待确认叫待审核 -->
            <!-- 已确认 -->
            <!-- {{ scope.row.checkStatus }}--{{ user_id }}-{{ scope.row.userId }} -->
            <div v-if="scope.row.checkStatus == 1">
              <!-- 退出 -->
              <el-button type="text" :size="tableButtonSize" @click="editHandle(scope.row)">{{
                $t('personOriginationInfo.xinxi18')
              }}</el-button>
            </div>
            <div v-if="user_deptId == 'null'">
              <div v-if="user_id == scope.row.userId">
                <div v-if="scope.row.checkStatus == 0">
                  <!-- 同意 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="approveMember(scope.row.id, 'ty', scope.row.name)"
                    >{{ $t('personOriginationInfo.xinxi15') }}</el-button
                  >
                  <!-- 拒绝 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="approveMember(scope.row.id, 'jj', scope.row.name)"
                    >{{ $t('personOriginationInfo.xinxi16') }}</el-button
                  >
                </div>
              </div>
              <div v-if="user_id != scope.row.userId">
                <!-- 内部申请 待确认 无操作 && user_id != scope.row.userId -->
                <div v-if="scope.row.checkStatus == 0 || scope.row.checkStatus == 4">
                  <!-- 同意 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="approveMember(scope.row.id, 'ty', scope.row.name)"
                    >{{ $t('personOriginationInfo.xinxi15') }}</el-button
                  >
                  <!-- 拒绝 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="approveMember(scope.row.id, 'jj', scope.row.name)"
                    >{{ $t('personOriginationInfo.xinxi16') }}</el-button
                  >
                </div>
              </div>
            </div>
            <div v-if="user_deptId != 'null'">
              <div v-if="user_id == scope.row.userId">
                <!-- 内部申请 待确认 无操作 && user_id != scope.row.userId -->
                <div v-if="scope.row.checkStatus == 0 && user_deptId != scope.row.deptId">
                  <!-- 同意 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="approveMember(scope.row.id, 'ty', scope.row.name)"
                    >{{ $t('personOriginationInfo.xinxi15') }}</el-button
                  >
                  <!-- 拒绝 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="approveMember(scope.row.id, 'jj', scope.row.name)"
                    >{{ $t('personOriginationInfo.xinxi16') }}</el-button
                  >
                </div>
                <!-- 外部邀请 待审核 && user_id != scope.row.userId&&user_deptId !=scope.row.deptId-->
                <div v-if="scope.row.checkStatus == 4 && user_deptId != scope.row.deptId">
                  <!-- 同意 -->
                  <!-- <el-button type="text" @click="approveMember(scope.row.id, 'ty', scope.row.name)"
                                        :size="tableButtonSize">{{
                                            $t('personOriginationInfo.xinxi15') }}</el-button> -->
                  <!-- 拒绝 -->
                  <!-- <el-button type="text" @click="approveMember(scope.row.id, 'jj', scope.row.name)"
                                        :size="tableButtonSize">{{
                                            $t('personOriginationInfo.xinxi16') }}</el-button> -->
                </div>
              </div>
              <div v-if="user_id != scope.row.userId">
                <!-- 内部申请 待确认 无操作 && user_id != scope.row.userId -->
                <div v-if="scope.row.checkStatus == 0 || scope.row.checkStatus == 4">
                  <!-- 同意 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="approveMember(scope.row.id, 'ty', scope.row.name)"
                    >{{ $t('personOriginationInfo.xinxi15') }}</el-button
                  >
                  <!-- 拒绝 -->
                  <el-button
                    type="text"
                    :size="tableButtonSize"
                    @click="approveMember(scope.row.id, 'jj', scope.row.name)"
                    >{{ $t('personOriginationInfo.xinxi16') }}</el-button
                  >
                </div>
              </div>
            </div>

            <!-- 内部申请 已拒绝 -->
            <div v-if="scope.row.checkStatus == 2">
              <!-- 拒绝原因 scope.row.delFlag == 1 -->
              <el-button
                type="text"
                :size="tableButtonSize"
                @click="reasonHandle(scope.row, $t('personOriginationInfo.xinxi17'))"
                >{{ $t('personOriginationInfo.xinxi17') }}</el-button
              >
            </div>

            <!-- 外部邀请 已拒绝 -->
            <div v-if="scope.row.checkStatus == 2 && 1 == 2">
              <!-- 拒绝原因 scope.row.delFlag == 1 -->
              <el-button
                type="text"
                :size="tableButtonSize"
                @click="reasonHandle(scope.row, $t('personOriginationInfo.xinxi17'))"
                >{{ $t('personOriginationInfo.xinxi17') }}</el-button
              >
            </div>
            <!-- 已退出 -->
            <div v-if="scope.row.checkStatus == 3">
              <!-- 退出原因  -->
              <el-button
                type="text"
                :size="tableButtonSize"
                @click="reasonHandle(scope.row, $t('personOriginationInfo.xinxi41'))"
                >{{ $t('add.add105') }}</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div v-if="tableData.length > 0" style="margin: 16px 0; float: right">
        <el-pagination
          background
          :current-page.sync="form.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <OrganizationJoin ref="OrganizationJoin" />
    <createJoinType ref="createJoinType" @getList="getList" />
    <Reason ref="Reason" />
    <Exit ref="Exit" @getList="getList" />
  </div>
</template>

<script>
import createJoinType from '@/components/createJoinType/index'; // 选择加入或创建机构
import OrganizationJoin from '@/components/join/index'; // 加入或创建机构
import Reason from '@/components/reason/index'; // 查看原因
import Exit from '@/components/exit/index'; // 退出机构
export default {
  name: 'BLZMasterIndex',
  components: {
    createJoinType,
    OrganizationJoin,
    Reason,
    Exit,
  },
  data() {
    return {
      tableData: [],
      queryCriteria: {
        type: '',
        name: '',
      },
      form: {
        id: '',
        name: '',
        type: '', // 0诊所 1技工所
        createDate: '', // 创建时间
        updateDate: '', // 跟新时间
        checkStatus: '',
        type: 0,
        page: 1, // 默认第1页
        limit: 10, // 每页条数
      },
      total: 0, // 总条数
      user_id: '',
      user_deptId: '', // 机构id
    };
  },

  created() {
    this.getList();
    this.user_id = localStorage.getItem('user_id');
    this.user_deptId = localStorage.getItem('user_deptId');
  },

  methods: {
    // 创建或加入
    addHandle() {
      this.$refs.createJoinType.dialogShow = true;
      this.$refs.createJoinType.tableData = this.tableData;
      // this.$refs.OrganizationJoin.dialogShow = true;
    },
    // 退出原因查看
    reasonHandle(row, title) {
      if (title == '退出原因' || title == 'Exit reason') {
        this.$refs.Reason.remark = row.remark;
      } else if (title == '拒绝原因' || title === 'Refuse reason') {
        this.$refs.Reason.remark = row.rejectReason;
      }
      this.$refs.Reason.title = title;
      this.$refs.Reason.dialogShow = true;
    },
    // 退出
    editHandle(row) {
      this.$refs.Exit.form.deptId = row.id;
      this.$refs.Exit.form.name = row.name;
      this.$refs.Exit.dialogShow = true;
    },
    // 拿表单数据
    getList() {
      this.$http
        .get(
          `/sys/organized/getUserDeptListPage?page=${this.form.page}&limit=${this.form.limit}&timeZone=${this.$timeZone}`,
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
            if (this.tableData.length <= 0 && this.form.page > 1) {
              this.form.page -= 1;
              this.getList();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    handleSizeChange(val) {
      this.form.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList();
    },
    approveMember(id, checkStatus, name) {
      const form = {
        id: id,
        checkStatus: '', // 0,待审核,1: 审核通过 ,2,审核拒绝
      };
      if (checkStatus == 'ty') {
        form.checkStatus = 1;
        this.$confirm(this.$t('add.add106') + `【${name}】`, this.$t('members.chengyuan38'), {
          confirmButtonText: this.$t('members.chengyuan31'),
          cancelButtonText: this.$t('members.chengyuan30'),
          type: 'warning',
        })
          .then(async () => {
            this.$http
              .post('/sys/organized/approveMember', form)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                } else {
                  this.$message.success(this.$t('personOriginationInfo.xinxi19'));
                  this.getList();
                  location.reload();
                }
              })
              .catch((err) => {
                console.log('err', err);
              });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: this.$t('partner.hezuo21'),
            });
          });
      } else if (checkStatus == 'jj') {
        form.checkStatus = 2;
        this.$confirm(
          this.$t('add.add107') + `【${name}】` + this.$t('add.add108'),
          this.$t('members.chengyuan38'),
          {
            confirmButtonText: this.$t('members.chengyuan31'),
            cancelButtonText: this.$t('members.chengyuan30'),
            type: 'warning',
          },
        )
          .then(async () => {
            this.$prompt(this.$t('add.add109'), this.$t('add.add140'), {
              confirmButtonText: this.$t('members.chengyuan31'),
              cancelButtonText: this.$t('members.chengyuan30'),
              inputErrorMessage: this.$t('members.chengyuan78'),
              inputPattern: /.+/,
            })
              .then(({ value }) => {
                if (value == '') {
                  return this.$message.error(this.$t('add.add109'));
                }
                form.rejectReason = value;
                this.$http
                  .post('/sys/organized/approveMember', form)
                  .then(({ data: res }) => {
                    if (res.code !== 0) {
                      return this.$message.error(res.msg);
                    } else {
                      this.$message.success(this.$t('personOriginationInfo.xinxi20'));
                      this.getList();
                    }
                  })
                  .catch((err) => {
                    console.log('err', err);
                  });
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: this.$t('add.add73'),
                });
              });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: this.$t('partner.hezuo21'),
            });
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.organizationinfo {
  .person_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    span {
      font-size: 16px;
      font-weight: 500;
      color: #003e67;
    }
  }
}
</style>
